<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router="isRouter"
    >
      <template v-for="(item, index) in TreeItems">
        <el-submenu v-if="item.children" :index="item.Hpath" :key="index">
          <template slot="title">
            <i :class="item.iconpath"></i>
            <span>{{item.title}}</span>
          </template>
          <div v-for="(ch, index) in item.children" :key="index">
            <el-menu-item :index="ch.Hpath" :key="index">{{ch.title}}</el-menu-item>
          </div>
        </el-submenu>
        <el-menu-item v-else :index="item.Hpath" :key="index">
          
            <i :class="item.iconpath"></i>
            <span>{{item.title}}</span>

        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  data() {
    return {
        isRouter:true,
      TreeItems: [
        {
          id: "2001",
          title: "客户管理",
          iconpath: "el-icon-location",
          children: [
            { id: "2012", title: "客户投诉"},
            { id: "2013", title: "客户回访" },
            { id: "2014", title: "客户添加"  ,Hpath:"/cusadd"},
            { id: "2015", title: "联系人添加" },
            { id: "2016", title: "客户关怀" }
          ]
        },
        {
          id: "3001",
          title: "联系人管理",
          iconpath: "el-icon-document",
          children: [{ id: "3011", title: "联系人展示" ,Hpath:"/testN"}]
        }
      ]
    };
  }
};
</script>

<style scoped>
</style>